<template>
	<view class="index_page">
		<view class="header">
			<view class="logo">
				<image src="../../static/login/u39.png"/>
			</view> 
			<view class="title_cell">
				<uni-title type="h1" title="京山智慧水利—叶畈水库"  align="center" color="#fff"></uni-title> 
				<text>Intelligent water conservancy online monitoring platform</text>
			</view>
		</view>
		<view class="content">
			<view class="content_title">险情公告</view>
			<view class="xq_content">
				<uni-icons type="sound-filled" color="#e43d33" size="20" />
				<text>今日17:00水库水位178m，已超警戒值5m。</text>
			</view>
		</view>
		<view class="content mt-10">
			<view class="content_title">数字看板</view>
			<view class="data_board">
				<view v-for="item in dataBoardList" :key="item.text" @click="jumpTo(item.path)">
					<view>
						<image :src="item.img" mode="scaleToFill" />
					</view>
					<text>{{ item.text }}</text>
				</view> 
			</view>
		</view>
		<custom-tabBar></custom-tabBar>
	</view>
</template>

<script>
	export default {
		data() {
			return { 
				dataBoardList: [
					{ img: require('static/index/实时水情.png'), text: '实时水情', path: "pages/index/LiveHydro/LiveHydro" },
					{ img: require('static/index/大坝安全.png'), text: '大坝安全', path: "pages/index/DamSafety/DamSafety" },
					{ img: require('static/index/视频监控.png'), text: '视频监控', path: "pages/index/VideoMonitor/VideoMonitor" }, 
					{ img: require('static/index/逐时雨量.png'), text: '逐时雨量', path: "pages/index/HourlyRainfall/HourlyRainfall" },
					{ img: require('static/index/水质监测.png'), text: '水质监测', path: "pages/index/waterMonitoring/waterMonitoring" },
					{ img: require('static/index/流量监测.png'), text: '流量监测', path: "pages/index/FlowMonitoring/FlowMonitoring" },
				],
			}
		},
		methods: {
			jumpTo(path) {
				uni.navigateTo({
					url: `/${path}`
				});
			}
		}
	}
</script>

<style lang="scss">
.header{
	width: 100%;
	height: 36vh;
	padding-top: 10%;
	box-sizing: border-box;
	background: url(../../static/login/Rectangle1.png) no-repeat 0 0/100% 100%;
	position: relative;
	margin-bottom: 6rem;
	.logo{ 
		position: absolute; 
		top: 51%;
		width: 100vw;
		display: flex; 
		justify-content: center;
		image{   
			width: 70vw;
			height: 29vh;
		}
	}

	.title_cell{   
		text-align: center;
		/deep/ .uni-h1{
			font-size: 2rem;
		}

		text{
			font-size: 1.2rem;
			color: #ffffff90;
		}
	}
}

.content{
	padding: 1rem;
	background-color: #fff;
	.content_title{
		background: url(../../static/index/Vector.png) no-repeat center left/0.8rem 1rem;
		padding-left: 1.6rem;
		font-size: 0.8rem;
		font-weight: bold;
		margin-bottom: 0.6rem;
	}
}

.xq_content{
	display: flex;
	align-items: center; 
	text{
		margin-left: 0.4rem;
		font-size: 0.8rem;
		color: #63656b;
	}
}

.mt-10{
	margin-top: 0.4rem;
}

.data_board{
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	>view{
		width: 30%;
		text-align: center;
		margin-bottom: 1rem;
		>view{
			width: 4.6rem;
			height: 4.6rem;
			border-radius: 50%;
			background-color: #E3E3E3;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0.4rem auto;
			image{
				width: 2.6rem;
				height: 2.6rem;
			}
		}
	}
}
</style>

